// 获取相关dom元素
const header = document.querySelector('.header');
// 监听滚动事件
window.addEventListener('scroll', () => {
    // 获取滚动条距离顶部的距离
    const scrollTop = document.documentElement.scrollTop
    // 当滚动条距离顶部的距离大于300px时，添加样式
    if (scrollTop > 300) {
        header.classList.add('active')
    } else {
        header.classList.remove('active')
    }

})
// 获取所有要添加动画的元素
const items=document.querySelectorAll('[data-reveal]')
// 封装函数
function resetItem(){
    items.forEach(item=>{
        // 当元素距离可视区域小于一屏时，添加动画
        if(item.getBoundingClientRect().top<window.innerHeight){
            item.classList.add('reset')  
        }
      })

}
// 监听页面的加载事件
window.addEventListener('load',resetItem)
// 监听页面滚动事件
window.addEventListener('scroll',resetItem)